<div id="config-general">
	<div style="text-align:center;font-family:verdana;">
		<div class="general-warning"></div>
		<table class="table table-bordered table-condensed">
			<tbody>
			<tr>
				<td class="col-md-10 title" colspan="4">ServerMap</td>
			</tr>
			<tr>
				<td class="col-md-5">
					<span class="sub-title" style="padding-right:10px">Search Depth</span>
					<span style="padding: 0px 24px 0px 0px">(<img src="images/inbound.png" width="18px" height="18px"/> Inbound <img src="images/outbound.png" width="18px" height="18px"/> Outbound)</span>
					<div class="btn-group btn-group-sm input-group input-group-sm inout-bound" style="margin-top:0px;width:120px;display:inline-block;">
						<button type="button" class="btn btn-default">
							<img src="images/inbound.png" width="18px" height="18px"/> {{callee}} <img src="images/outbound.png" width="18px" height="18px"/> {{caller}}
						</button>
						<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" style="padding-bottom:6px">
							<span class="caret"></span>
							<span class="sr-only">Toggle Dropdown</span>
						</button>
						<div class="dropdown-menu" role="menu">
							<ul class="inbound">
								<li class="inbound-title"><img src="images/inbound.png" width="20px" height="20px"/> Inbound</li>
								<li class="depth" ng-repeat="d in depthList" ng-class="{selected: d === callee}" ng-click="changeCallee(d)">{{d}}</li>
							</ul>
							<ul class="outbound">
								<li class="outbound-title"><img src="images/outbound.png" width="20px" height="20px"/> Outbound</li>
								<li class="depth" ng-repeat="d in depthList" ng-class="{selected: d === caller}" ng-click="changeCaller(d)">{{d}}</li>
							</ul>
							<div style="clear: both;padding: 4px 2px 2px 2px">
								<button type="button" class="btn btn-default btn-xs" style="float:right;" ng-click="closeInOut()">Close</button>
							</div>
						</div>
					</div>
				</td>
				<td class="col-md-5">
					<span class="sub-title">Search Period</span>
					<select class="period form-control" ng-change="changePeriod()" ng-model="period" style="width:60%;display:inline-block;height:30px;">
						<option ng-repeat="per in periodTime" ng-selected="per == period" value="{{per}}">{{per}}</option>
					</select>
				</td>
			</tr>
			</tbody>
		</table>
		<table class="table table-bordered table-condensed favorite-application">
			<tbody>
			<tr>
				<td class="col-md-10 title" colspan="4">Favorite Application</td>
			</tr>
			<tr>
				<td class="col-md-5">
					<application-list-directive init-app-name="" use-favorite="false" not-set-open="false" ></application-list-directive>
				</td>
				<td class="col-md-5" colspan="2">
					<div class="favorite-list-wrapper">
						<ul class="favorite-list" ng-click="removeFavorite($event)"></ul>
						<div ng-show="savedFavoriteList.length == 0" style="color:#F00" class="favorite-empty"></div>
					</div>
				</td>
			</tr>
			</tbody>
		</table>
		<table class="table table-bordered table-condensed favorite-application">
			<tbody>
			<tr>
				<td class="col-md-10 title" colspan="4">TimeZone</td>
			</tr>
			<tr>
				<td class="col-md-5">
					<select class="form-control" style="width:310px;height:30px;" ng-model="newUserTimezone">
						<option ng-repeat="zone in timezone" value="{{zone}}" ng-selected="zone == userTimezone">{{zone}}</option>
					</select>
				</td>
				<td class="col-md-5" colspan="2" style="vertical-align: middle;font-weight:bold;">
					<span style="display:inline-block;margin-top:6px;">{{userTimezone}}</span>
					<span ng-show="newUserTimezone !== userTimezone" style="display:inline-block;margin-top:6px;color:#999;">- {{newUserTimezone}}</span>
					<button ng-click="applyNReload()" ng-show="newUserTimezone !== userTimezone" class="btn btn-success" style="float:right;margin-right:6px;">Apply & Reload</button>
				</td>
			</tr>
			</tbody>
		</table>
	</div>
</div>